<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互</title>
		<script src="./jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				/*data参数传递:
				1.对象方式实现数据传参
				语法:{key:value,key2:value2}
				2.拼接字符串的方式
				语法:key1 = value1 & key2 = value2
				*/
				$.ajax({
					type: "get",
					url: "http://localhost:8090/findAll",
					//data:{id:100,name:"tom",age:18}
					//data:"id=100&name=tom&age=18",
					success: function(data) {
						// for (var i = 0; i < data.length; i++) {
						// 	console.log(data[i])
						// }
						//js原生函数 in关键字遍历的是下标
						//js原生函数 of关键字遍历的是对象
						// for(index in data){
						// 	console.log(data[index])
						// }
						for (user of data) {
							let id = user.id
							let name = user.name
							let age = user.age
							let sex = user.sex
							let tr =
							`
							<tr align = 'center'>
								<td>${user.id}</td>
								<td>${user.name}</td>
								<td>${user.age}</td>
								<td>${user.sex}</td>
							</tr>
							`
							//append将指定的元素进行追加
							$("#tab1").append(tr)
							
						}


					}
				})







			})
		</script>
	</head>
	<body>
		<table id="tab1"   border="1px" width="80%" align="center">
			<tr align="center" height="60%">
				<th colspan="5">
					<h1>用户列表</h1>
				</th>
			</tr>
			<tr align="center" height="60%">
				<th>编号</th>
				<th>名称</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
		</table>
	</body>
</html>
